<template>
  <div class="profile-container">
    <h3 class="title">教师基本资料</h3>
    <el-form :model="teacher" label-width="80px" class="form" :disabled="!isEditing">
      <el-form-item label="头像">
        <el-image
            :src="teacher.photo"
            fit="cover"
            style="width: 100px; height: 100px; border-radius: 50%;"
        />
      </el-form-item>
      <el-form-item label="姓名">
        <span>{{ teacher.tname }}</span>
      </el-form-item>
      <el-form-item label="教师号">
        <span>{{ teacher.tno }}</span>
      </el-form-item>
      <el-form-item label="性别">
        <span>{{ teacher.gender }}</span>
      </el-form-item>
      <el-form-item label="出生年月">
        <span>{{ formatDate(teacher.birthday) }}</span>
      </el-form-item>
      <el-form-item label="班级">
        <span>{{ teacher.classid }}</span>
      </el-form-item>
      <el-form-item label="手机号">
        <span>{{ teacher.phone }}</span>
      </el-form-item>
    </el-form>

    <!-- 按钮组 -->
    <div class="button-group">
      <el-button type="primary" @click="editInfo">修改信息</el-button>
      <el-button type="danger" @click="toReset" style="margin-left: 10px;">重设密码</el-button>
      <el-button type="danger" @click="toLogin" style="margin-left: 10px;">退出登录</el-button>
    </div>

    <!-- 修改信息弹窗 -->
    <el-dialog v-model="dialogVisible" title="修改信息" width="30%">
      <el-form :model="editTeacher" label-width="80px" ref="editForm">
        <el-form-item label="头像">
          <el-input v-model="editTeacher.photo" placeholder="请输入头像URL"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="editTeacher.gender">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="editTeacher.phone" />
        </el-form-item>
        <el-form-item label="出生年月">
          <el-date-picker
              v-model="editTeacher.birthday"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              placeholder="选择日期"
              style="width: 100%;"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveEdit">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import { ElMessage } from 'element-plus';

const route = useRoute();
const id = route.query.id;
const teacher = ref({});
const editTeacher = ref({});
const dialogVisible = ref(false);
const isEditing = ref(false);
const router = useRouter();

onMounted(() => {
  getData();
});

const getData = () => {
  axios
      .get('http://localhost:8080/getMyTData', { params: { id } })
      .then((response) => {
        teacher.value = response.data;
        editTeacher.value = JSON.parse(JSON.stringify(response.data));
      })
      .catch((error) => {
        console.error(error);
      });
};

const toLogin = () => {
  router.push('/login');
};

const toReset = () => {
  router.push('/reset');
};

const editInfo = () => {
  dialogVisible.value = true;
  isEditing.value = true;
};

const saveEdit = () => {
  axios
      .put('http://localhost:8080/updateMyTData', editTeacher.value)
      .then(() => {
        ElMessage({
          type: 'success',
          message: '信息修改成功！',
        });
        dialogVisible.value = false;
        isEditing.value = false;
        getData();
      })
      .catch((error) => {
        console.error('保存失败:', error);
        ElMessage({
          type: 'error',
          message: '信息修改失败，请重试！',
        });
      });
};

const formatDate = (dateStr) => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  return `${date.getFullYear()}/${String(date.getMonth() + 1).padStart(2, '0')}/${String(
      date.getDate()
  ).padStart(2, '0')}`;
};
</script>

<style scoped>
.profile-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.title {
  margin-bottom: 20px;
  text-align: center;
}

.form {
  max-width: 400px;
  margin: 0 auto;
}

.button-group {
  margin-top: 20px;
  text-align: center;
}

.el-form-item {
  margin-bottom: 18px;
}
</style>
